<script setup>

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['update:show', 'download'])

// 弹窗关闭时触发的函数
function onClose() {
    emit('update:show', false); // 隐藏弹窗
}



function downloadVideoFn() {
    emit('download');
}

const customStyle = `background-color:transparent !important;`
</script>

<template>
    <van-popup :show="show" :custom-style="customStyle">
        <div class="tipPopup">
            <img src="https://devweb.topyunliu.com/upload/2025/04/17/file_20250417172328A004.png" mode="widthFix"
                class="imgSty" alt="">
            <div class="del_icon" @click="onClose">
                <i class="iconfont ai-icon-jiazaiguanbianniu"></i>
            </div>
            <div class="content">
                <div class="title">温馨提示</div>
                <div class="label">视频保存24小时</div>
                <div class="label">请及时下载到本地哦</div>
                <button class="bind_btn" @click="downloadVideoFn">下载视频</button>
            </div>
        </div>
    </van-popup>
</template>

<style lang='scss' scoped>
.tipPopup {
    position: relative;
    width: 540rpx;
    height: 600rpx;

    .imgSty {
        width: 540rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .del_icon {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 3;
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        border: 2rpx solid rgba(255, 255, 255, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;

        .iconfont {
            font-size: 48rpx;
            color: #bcbcbc;
        }
    }

    .content {
        position: relative;
        z-index: 2;
        padding: 214rpx 30rpx 0;
        text-align: center;

        .title {
            color: #121212;
            font-weight: bold;
            font-size: 40rpx;
        }

        .label {
            color: #323232;
            font-size: 28rpx;
            line-height: 46rpx;
        }

        .bind_btn {
            height: 72rpx;
            border-radius: 36rpx;
            background: linear-gradient(243deg, #A3B4FB 0%, #C3E9FF 100%);
            font-weight: bold;
            font-size: 30rpx;
            color: #121212;
            margin-top: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            &::after {
                border: none;
            }

        }
    }
}
</style>